    <template>
        <div>
            <div>
                <el-input
                    size="small"
                    class="addPosInput"
                    @keydown.enter.native="addPosition"
                    placeholder="添加职位..."
                    prefix-icon="el-icon-plus"
                    v-model="pos.name">
                </el-input>
                <el-button type="primary" icon="el-icon-plus" size="small" @click="addPosition()">添加</el-button>
            </div>
            <div class="posManaMain">
                <el-table
                        :data="positions"
                        stripe
                        size="small"
                        @selection-change="handleSelectionChange"
                        border
                        style="width: 60%">
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                            prop="id"
                            label="编号"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="职位名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="createDate"
                            label="创建时间"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            label="是否启用">
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.enabled">已启用</el-tag>
                            <el-tag type="danger" v-else>未启用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                        <!-- scope.$index:当前操作到第几行 scope.row：这一行对应的json对象 -->
                          <el-button
                            size="mini"
                            @click="showEditView(scope.$index, scope.row)">编辑</el-button>
                          <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                      </el-table-column>    
                </el-table>
                <el-button 
                    @click="deleteMany" type="danger" size="small" style="margin-top: 8px" 
                    :disabled="multipleSelection.length == 0">
                       批量删除
                </el-button>
                
            </div>
            <!--dialogVisible用来判断是否显示-->
            <el-dialog
                    title="修改职位"
                    :visible.sync="dialogVisible" 
                    width="30%">
                <div>
                    <div>
                        <el-tag>职位名称</el-tag>
                        <el-input class="updatePosInput" size="small" v-model="updatePos.name"></el-input>
                    </div>
                    <div style="margin-top: 5px;">
                        <el-tag style="margin-right: 8px">是否启用</el-tag>
                        <el-switch
                                v-model="updatePos.enabled"
                                active-text="启用"
                                inactive-text="禁用">
                        </el-switch>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
                </span>
            </el-dialog>

        </div>
    </template>
    
    <script>
        export default{
        data() {
            return {
                pos:{  //用于绑定添加框的
                    name:''
                },
                updatePos:{  //用于绑定修改框的
                    name:'',
                    enabled:false
                },
                dialogVisible:false,  //默认隐藏对话框
                positions:[],  //表单的数据
                multipleSelection: [],  //多选回调的数据
            }

        },
        mounted() {
            //一进到页面就调用初始化数据的方法
            this.initPositions();
        },
        methods: {
            //批量删除方法
            deleteMany(){
                this.$confirm('此操作将永久删除【'+ this.multipleSelection.length +'】条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = '?';
                    //遍历multipleSelection来拼接 
                    this.multipleSelection.forEach(item=>{
                        ids += 'ids=' + item.id + '&';
                    })
                    this.deleteRequest("/system/basic/pos/" + ids).then(resp => {
                        if (resp) {
                            this.initPositions();
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //多选回调方法
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //初始化数据
            initPositions(){
                //发送一个get请求去获取数据 请求地址是"/system/basic/pos/"        
                this.getRequest("/system/basic/pos/").then(resp =>{
                    //判断如果resp存在的话，请求成功
                    if(resp){
                        //请求成功就把resp的值赋值给positions就行了
                        this.positions = resp;
                    }
                })
            },
            //显示编辑对话框 index:当前操作到第几行 data：这一行对应的json对象
            showEditView(index,data){
                //this.updatePos = data

                //解决数据联动的问题，将data的值拷贝到this.updatePos去
                Object.assign(this.updatePos,data);
                this.dialogVisible = true;
            },
            //定义删除按钮的方法  index:当前操作到第几行 data：这一行对应的json对象
            handleDelete(index,data){
                this.$confirm('此操作将永久删除【'+data.name+'】职位, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/system/basic/pos/"+data.id).then(resp=>{
                        if (resp){
                            this.initPositions();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //定义添加按钮的方法 
            addPosition(){
                //添加的时候要做判断，看用户是否输入的值，如果没输入就给错误提示
                if (this.pos.name){
                    //this.pos ：参数是pos
                    this.postRequest("/system/basic/pos/",this.pos).then(resp=>{
                        if(resp){
                            //添加成功之后需要把表格刷新一下  可以直接用initPositions，重新加载数据
                            this.initPositions();
                            //添加完成之后清空输入框 
                            this.pos.name=' ';
                        }
                    })
                } else {
                    this.$message.error("职位名称不可以为空");
                }
            },
            //编辑操作
            doUpdate(){
                this.putRequest("/system/basic/pos/",this.updatePos).then(resp=>{
                    if (resp) {
                        //刷新数据
                        this.initPositions();
                        this.updatePos.name='';
                        this.dialogVisible=false; //隐藏对话框
                    }
                })
            },
          

        },
        }
    </script>
    
    <style scoped>
        .updatePosInput{
            width: 200px;
            margin-left: 8px;
        }
        .addPosInput{
            width: 300px;
            margin-right: 8px;
        }
        .posManaMain{
            margin-top: 10px;
        }
    </style>
    